<template>
	<view class="card-cost">
		<view class="cost-tr">
			<text>商品金额</text>
			<text>￥{{orderInfo.total_amount || orderInfo.order_amount}}</text>
		</view>
		<view class="cost-tr">
			<text>配送费</text>
			<text>￥{{orderInfo.freight !==undefined?orderInfo.freight:orderInfo.freight_amount}}</text>
		</view>
		<view class="cost-tr">
			<text>打包费</text>
			<text>￥{{orderInfo.pack_amount}}</text>
		</view>
		<view class="cost-tr">
			<text>优惠金额</text>
			<text style="color:#cc0022">-￥{{orderInfo.pre_amount}}</text>
		</view>
		<view class="payment">
			<text>支付方式</text>
			<view style="display: flex;align-items: center;">
				<text class="iconfont icon-weixinzhifu"></text>
				<text>微信支付</text>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	props:{
		orderInfo:{
			type:Object,
			default:() => {}
		}
	},
	data(){
		return{
			
		}
	}
}
</script>

<style lang="scss">
	.card-cost{
		padding: 22rpx 27rpx;
		background-color: #fff;
		border-radius: 20rpx;
		// transform: translateY(-140rpx);
		.cost-tr{
			color: #000;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			&:nth-child(n+2){
				margin-top: 28rpx;
			}
		}
		.payment{
			color: #000;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 28rpx;
			.icon-weixinzhifu{
				font-size: 36rpx;
				color: #54D22D;
			}
		}
	}	
</style>